/*----------------------------------------*\
  CAROUSEL
\*----------------------------------------*/

.carousel {
  @apply relative;
  overflow: clip;
  overflow-clip-margin: 10px;

  figure {
    @apply py-0;
  }
}

.carousel__fonctions {
  @apply flex justify-center items-center py-2;
}

.carousel__prev,
.carousel__next {
  @apply hover:text-primary-600;
  @apply transition-colors duration-200;

  &[disabled] {
    @apply bg-white;
    @apply 2xl:bg-gradient-to-r 2xl:via-white 2xl:from-white opacity-50;
  }

  & svg {
    @apply w-10 h-10;
  }
}

.carousel__pagination {
  @apply flex justify-center px-6;
}

.carousel__bullet {
  @apply block w-4 h-4 rounded-full mx-2;
  @apply bg-transparent border border-text-600;
  @apply hover:border-primary-600 hover:bg-primary-500;
  @apply cursor-pointer;
  @apply transition-colors duration-200;
}

.carousel__bullet--active {
  @apply bg-text-500 hover:bg-text-500;
  @apply cursor-default;
}

.carousel--fraction {
  .carousel__fonctions {
    @apply justify-end;
  }
}

.carousel--bullets {
  .carousel__prev {
    @apply lg:absolute lg:top-0 lg:bottom-[60px] lg:-left-14 lg:z-10;
    @apply 2xl:-left-20;
    @apply order-1;
  }

  .carousel__pagination {
    @apply order-2;
  }

  .carousel__next {
    @apply lg:absolute lg:top-0 lg:bottom-[60px] lg:-right-14 lg:z-10;
    @apply 2xl:-right-20;
    @apply order-3;
  }

  .carousel__prev svg,
  .carousel__next svg {
    @apply w-12 h-12;
    @apply lg:w-14 lg:h-14;
    @apply 2xl:w-20 2xl:h-20;
  }
}

.carousel--cards {
  .swiper-container,
  .swiper {
    @apply p-12 !pt-0;
    @apply -mr-12 -ml-12 -mb-8;
    @apply 2xl:p-14;
    @apply 2xl:-mr-14 2xl:-ml-14 2xl:-mb-12;
  }

  .carousel__fonctions {
    @apply py-4 2xl:py-10;
    @apply relative 2xl:static z-20;
  }

  .carousel__prev {
    @apply order-1;
    @apply 2xl:absolute  2xl:z-10;
    @apply 2xl:top-0 2xl:bottom-0 2xl:left-0;
    @apply 2xl:-translate-x-full;
    @apply 2xl:bg-gradient-to-r 2xl:via-white 2xl:from-white;
  }

  .carousel__next {
    @apply order-3;
    @apply 2xl:absolute 2xl:top-0 2xl:bottom-0 2xl:right-0 2xl:z-10;
    @apply 2xl:translate-x-full;
    @apply 2xl:bg-gradient-to-l 2xl:via-white 2xl:from-white;
  }

  .carousel__pagination {
    @apply order-2;
    @apply px-4;
  }

  .carousel__prev svg,
  .carousel__next svg {
    @apply w-12 h-12;
    @apply lg:w-14 lg:h-14;
    @apply 2xl:w-20 2xl:h-20;
    @apply 3xl:w-24 3xl:h-24;
  }
}

.bg--secondary-50 {
  .carousel__prev {
    @apply 2xl:via-secondary-50 2xl:from-secondary-50;
    &[disabled] {
      @apply bg-secondary-50;
    }
  }
  .carousel__next {
    @apply 2xl:via-secondary-50 2xl:from-secondary-50;
    &[disabled] {
      @apply bg-secondary-50;
    }
  }
}
.bg--secondary-100 {
  .carousel__prev {
    @apply 2xl:via-secondary-100 2xl:from-secondary-100;
    &[disabled] {
      @apply bg-secondary-100;
    }
  }
  .carousel__next {
    @apply 2xl:via-secondary-100 2xl:from-secondary-100;
    &[disabled] {
      @apply bg-secondary-100;
    }
  }
}
.bg--secondary-500 {
  .carousel__prev {
    @apply 2xl:via-secondary-500 2xl:from-secondary-500;
    &[disabled] {
      @apply bg-secondary-500;
    }
  }
  .carousel__next {
    @apply 2xl:via-secondary-500 2xl:from-secondary-500;
    &[disabled] {
      @apply bg-secondary-500;
    }
  }
}
.bg--secondary-600 {
  .carousel__prev {
    @apply 2xl:via-secondary-600 2xl:from-secondary-600;
    &[disabled] {
      @apply bg-secondary-600;
    }
  }
  .carousel__next {
    @apply 2xl:via-secondary-600 2xl:from-secondary-600;
    &[disabled] {
      @apply bg-secondary-600;
    }
  }
}

.bg--secondary-500,
.bg--secondary-600 {
  .carousel__bullet {
    @apply border-text-400;
  }
  .carousel__bullet--active {
    @apply bg-text-300;
  }
  .carousel__prev,
  .carousel__next {
    @apply text-text-50 hover:text-primary-400;
  }
}

/* swiper container */

.swiper-container,
.swiper {
  margin-left: auto;
  margin-right: auto;
  position: relative;
  overflow: hidden;
  list-style: none;
  padding: 0;
  /* Fix of Webkit flickering */
  z-index: 1;
}
.swiper-container-vertical > .swiper-wrapper,
.swiper-vertical > .swiper-wrapper {
  flex-direction: column;
}
.swiper-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 1;
  display: flex;
  align-items: stretch;
  transition-property: transform;
  box-sizing: content-box;
}
.swiper-container-android .swiper-slide,
.swiper-android .swiper-slide,
.swiper-wrapper {
  transform: translate3d(0px, 0, 0);
}
.swiper-container-multirow > .swiper-wrapper,
.swiper-multirow > .swiper-wrapper {
  flex-wrap: wrap;
}
.swiper-container-multirow-column > .swiper-wrapper,
.swiper-multirow-column > .swiper-wrapper {
  flex-wrap: wrap;
  flex-direction: column;
}
.swiper-container-free-mode > .swiper-wrapper,
.swiper-free-mode > .swiper-wrapper {
  transition-timing-function: ease-out;
  margin: 0 auto;
}
.swiper-container-pointer-events,
.swiper-pointer-events {
  touch-action: pan-y;
}
.swiper-container-pointer-events.swiper-container-vertical,
.swiper-pointer-events.swiper-vertical {
  touch-action: pan-x;
}
.swiper-slide {
  flex-shrink: 0;
  width: 100%;
  height: auto;
  position: relative;
  transition-property: transform;
}
.swiper-slide-invisible-blank {
  visibility: hidden;
}
/* Auto Height */
.swiper-container-autoheight,
.swiper-autoheight .swiper-container-autoheight .swiper-slide,
.swiper-autoheight .swiper-slide {
  height: auto;
}
.swiper-container-autoheight .swiper-wrapper,
.swiper-autoheight .swiper-wrapper {
  align-items: flex-start;
  transition-property: transform, height;
}

/* Hide dot pagination when there's too much dots */
.carousel__pagination:has(> :nth-child(6)) {
  @apply hidden sm:flex;
}

.carousel__pagination:has(> :nth-child(13)) {
  @apply hidden md:flex;
}
